import React, { Fragment } from "react";
import { Navigate, Route, Routes } from "react-router-dom";
import { Layout } from "antd";
import { Router } from "./router";
import { items } from "./router/columns";
import { elements } from "./columns";
import "./App.css";

const { Content } = Layout;

const contentStyle: React.CSSProperties = {
	// backgroundColor: "#ccc",
};

const layoutStyle = {
	height: "100%",
	overflow: "hidden",
	background: "none",
};

function App() {
	return (
		<Layout style={layoutStyle}>
			<Router />
			<Content style={contentStyle}>
				<Routes>
					{items.map(({ key }) => {
						return (
							<Fragment key={key}>
								<Route path={key} element={elements[key]} />
							</Fragment>
						);
					})}
					<Route path="/" element={<Navigate to="/list" replace />} />
				</Routes>
			</Content>
		</Layout>
	);
}

export default App;
